<template>
    <div class="body">
        <el-container style="height: 100%;">
            <el-header class="header" style="height: 8%">
                <div class="title">权限管理系统</div>
                <div class="user">
                    <div class="user-icon">
                        <el-avatar icon="el-icon-user-solid"/>
                    </div>
                    <span v-text="userName"/>
                    <span v-text="role"/>
                    <el-button type="primary" @click="logout">登出</el-button>
                </div>
            </el-header>
            <el-container style="height: 90%">
                <el-aside width="15%" style="background-color: #324158;">
                    <el-menu background-color="#324158" text-color="#fff" style="border-width: 0" default-active="1">
                        <router-link v-for="(item,i) in this.$store.state.permissionsList"
                                     :to=item.permissions_router replace>
                            <el-menu-item :index=String(i+1) v-permissions="item.permissions_name" @click="currentMenu = String(i+1)">
                                <i class="el-icon-tickets" />{{item.permissions_name}}
                            </el-menu-item>
                        </router-link>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                userName: "",
                role: ""
            }
        },
        methods: {
            logout() {
                this.$router.replace("/login")
            }
        },
        mounted() {
            this.userName = this.$store.state.userInfo.user_name;
            this.role = this.$store.state.userInfo.role_name;
        }
    }
</script>

<style scoped>
    .body {
        height: 100%;
        width: 100%;
    }

    .header {
        background-color: #242f41;
        line-height: 70px;

    }

    .title {
        float: left;
        font-size: 25px;
        font-weight: bold;
        margin-left: 2%;
        color: white;
    }

    .user {
        float: left;
        font-size: 15px;
        color: white;
        margin-left: 78%;
        line-height: 70px;
    }

    .user span {
        margin-right: 20px;
    }

    .user-icon {
        position: absolute;
        margin-top: 15px;
        margin-left: -60px;
    }
</style>